<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://ogp.me/ns/fb#" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Editor | Design Blogger Templates and Widgets</title>
<meta content='Learn How to Design Blogger Templates and Create Blogger Widgets Using this HTML Editor.' name='description'/>
<meta content='Design Blogger Templates, Design Blogger Widgets, Create Widgets, CSS, HTML, Javascript' name='keywords'/>
<script type='text/javascript' src='scripts/editor.js'></script>
<link href='http://lh4.ggpht.com/_7wsQzULWIwo/SvZu8ooXoQI/AAAAAAAACJk/78jXTrMVkM8/s800/MBT-favicon.gif' rel='icon' type='image/gif'/>


<style type="text/css">

body{position:relative;overflow-x:hidden;width:1007px;margin:0 auto;padding:0;background:rgba(0,0,0,.05);font-family: Georgia, "Times New Roman", Times, serif;font-size:13px;}
.codebox{
	margin:0px;
	color:#222;
	font-size:12px;
	font-weight:400;
	border:double 5px #666;
	padding: 5px;
	min-width:200px;
	width:400px;
	max-width:400px;
	height:500px;
	overflow:auto;
	margin-left:0;
	line-height:22px;
}
.GRpreview{
	height:500px;
	width:540px;
	border:double 5px #666;
	padding:5px;
}
.GRpreview:hover{
	height:560px;
	width:500px;
	border:double 5px #666;
	padding:5px;
}
td.yourprev{
	position:fixed;
	width:540px;
	left:450px;
	top:110px;
	-moz-transition:0.5s;-o-transition:0.5s;-ms-transition:0.5s;-moz-transition:0.5s;-webkit-transition:0.5s;		
}
td.yourprev:hover{
	position:fixed;
	left:0px;
	top:60px;
	width:1002px;
	background:#fff;
	-moz-transition:0.5s 1s;-o-transition:0.5s 1s;-ms-transition:0.5s 1s;-moz-transition:0.5s 1s;-webkit-transition:0.5s 1s;
}
td.yourprev iframe.GRpreview{width:100%;}
td.yourprev:hover iframe.GRpreview{width:100%;}
header{position:relative;display:block;width:100%;height:60px;background:rgba(0,0,0,.8);margin:0;}

.mycode{
	position:fixed;
	padding:5px 10px;
	background:#fff;
	border-radius:5px;
	width:90px;
	height:30px;
	top:10px;
	right:20px;
	font-size:16px;
	overflow:hidden;
	}
.mycode:hover{
	width:540px;
	height:610px;
	z-index:9999999;
	}
</style>

</head>
<body>
<header>
<div style="width:400px;margin-top:20px;padding:0 10px;float:left;">
<button onclick="preview.document.write (document.getElementsByTagName ('textarea')[0].value); preview.document.close(); preview.focus()">Edit Code and Click to Preview</button>
<button onclick="window.document.form2.code.value='';preview.document.write (document.getElementsByTagName ('textarea')[0].value); preview.document.close(); preview.focus()">
Clear </button>
</div>
<div class="mycode"><span style="display:block;float:right;padding:0;text-align:center;">Daftar Code</span>

</div>
</header>
<table width="771" border="1" style="font-size:10px;margin-left:0px;">
  <tr>
    <td width="53">&lt;html&gt;</td>
    <td width="51">&lt;head&gt;</td>
    <td width="50">&lt;/body&gt;</td>
    <td width="101">&lt;!DOCTYPE html&gt;</td>
    <td width="108">&lt;style type='text/css'&gt;</td>
    <td width="149">&lt;script type='text/javascript'&gt;</td>
    <td width="33">&lt;div&gt;</td>
    <td width="31">&lt;p&gt;</td>
    <td width="41">class</td>
    <td width="33">id</td>
    <td width="51">&nbsp;</td>
  </tr>
  <tr>
    <td height="23">&lt;/html&gt;</td>
    <td>&lt;/head&gt;</td>
    <td>&lt;/body&gt;</td>
    <td>&nbsp;</td>
    <td>&lt;/style&gt;</td>
    <td>&lt;/script&gt;</td>
    <td>&lt;/div&gt;</td>
    <td>&lt;/p&gt;</td>
    <td>width</td>
    <td>height</td>
    <td>&nbsp;</td>
  </tr>
</table>
<table style="width:100%;background:rgba(0,0,0,.1);margin:0;">
<tr> 
<td valign="top">

<form name="form2" method="post">
<textarea class="codebox" name="code" onClick="focus(this.code)">

<!DOCTYPE html>
<html>
<head> 	
<style type='text/css'>
div{
  width:200px;
  height:200px;
  background:red;
  margin:50px auto;
  border:10px solid rgba(0,0,0,.3);
  border-radius:12px;
}
p{
  font:bold 22px Arial;
  color:yellow;
  text-align:center;
  margin-top:60px;
}
</style>
</head>

<body>

<div><p>Compatible in IE NOW!</p></div>

</body>
</html>

</textarea>
</form>
</td>
<td valign="top" class="yourprev">
<iframe class="GRpreview" src="about:blank" name="preview" frameborder="0" style="display:block;margin:0 auto;"></iframe>
</td>
</tr>
</table>


</body>
</html>